<template>
	<view class="detail-wrapper">
		<view class="header-wrapper">
			<view class="atv">
				<image :src="detailInfo.headImgUrl?detailInfo.headImgUrl:'../../static/currentImg.png'" mode="">
				</image>
			</view>
			<view class="info">{{ detailInfo.nickname}}(间接推荐人数 {{detailInfo.recomNum}}) 人</view>
		</view>
		<view class="list-wrap">
			<scroll-view scroll-y="true" style="height: 100%" @scrolltolower="pullData"
				@refresherrefresh="refreshData" refresher-enabled="true" :refresher-triggered="triggered" v-if="list.length > 0">
				<view class="list-item" v-for="item in list">
					<view class="atv">
						<image :src="item.headImgUrl?item.headImgUrl:'../../static/currentImg.png'" mode="">
						</image>
						<view class="name">{{ item.nickname }}</view>
						<view class="tag">{{ item.levelName }}</view>
					</view>
					<view class="date">
						{{ item.createdTime }}
					</view>
				</view>
			</scroll-view>
			<view v-else class="empty">
				<image src="../../static/empty.png"></image>
				<text>无数据</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				detailInfo: {},
				list: [],
				pageNum: 1,
				total: 0,
				triggered:false,
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
		},
		methods: {
			//积分
			getDetailInfo(data) {
				console.log(data)
				this.detailInfo = data.data
				this.getList()
	
			},
			async getList(){
				try {
					const res = await this.$request({
						method: 'get',
						url: '/user-center/app/share/getRecomUserList',
						data: {
							pageSize: 20,
							pageNum: this.pageNum,
							friendsId: this.detailInfo.userId,
							userId: this.getUserInfo.id
						}
					})
					this.list = this.list.concat(res.datas.data)
					this.total = res.datas.count
					this.triggered = false
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					this.triggered = false
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
				uni.stopPullDownRefresh();
			},
			// 滚动刷新
			pullData() {
				if (this.total >= this.list.length) {
					return false
				}
				this.pageNum++
				this.getList()
			
			},
			//下拉刷新
			refreshData() {
				this.list = []
				this.triggered = true
				this.getList()

			},

		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中...'
			})
			this.pageNum = 1
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('detailInfo', this.getDetailInfo)
		},

	}
</script>

<style lang="scss" scoped>
	.detail-wrapper {
		.header-wrapper {
			padding: 32rpx;
			background: #fff;
			display: flex;
			border-bottom: 1px solid #eee;
			align-items: center;
			margin-bottom: 20rpx;

			.atv {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				margin-right: 16rpx;
                overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				width: calc(100% - 115rpx);
				font-size: 14px;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
				word-wrap: break-all;
				overflow: hidden;
				line-break: anywhere;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}

		.list-wrap {
			height: calc(100vh - 190rpx);
			background: #fff;
			.empty {
				width: 100%;
				height: 80%;
				position: absolute;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			
				image {
					width: 220px;
					height: 180px;
				}
			
				text {
					font-size: 30rpx;
					color: rgba(0, 0, 0, 0.45);
					line-height: 30rpx;
				}
			}
			.list-item{
				padding: 15px 20px;
				border-bottom: 1px solid #eee;
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				.atv{
					display: flex;
					align-items: center;
					image{
						width: 80rpx;
						height: 80rpx;
						margin-right: 10rpx;
					}
					.name{
						margin-right: 20rpx;
					}
					.tag{
						padding: 2rpx 4rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: #E0A660;
						color: #60380B;
					}
				}
				.date{
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}

	}
</style>
